#@adminLayout()
#define main()
<div class="jbolt_page" data-key="#(pmkey)" data-dontchangeleftnav="true">
    <div class="jbolt_page_title">
        <div class="row">
            <div class="col-12">
                #setLocal(JboltWithTabs=CACHE.getUserJBoltAdminWithTabs(session[SessionKey.ADMIN_USER_ID]))
                <h1>#if(JboltWithTabs)
                    <a  class="mr-1" ><i class="fa fa-file-text-o"></i></a>
                    #else<a class="btn btn-outline-secondary mr-1" href="javascript:history.go(-1)"><i class="fa fa-chevron-left"></i></a>#end 商品管理-#(commodity==null?"添加新":"编辑")商品<span class="text-danger">【#(commodity.name??)】</span></h1>
            </div>
            <div class="col-12">
                #if(JboltWithTabs)
                <button class="btn btn-danger pull-right" onclick="closeCurrentAndReloadTiggerTab()"><i class="fa fa-check mr-1"></i>完成编辑</button>
                #else
                <a class="btn btn-danger pull-right" data-pjax href="/auth/mall/commodity"><i class="fa fa-check mr-1"></i>完成编辑</a>
                #end
            </div>
        </div>
    </div>
    <div class="jbolt_page_content">
        #setLocal(jboltTabId=(commodity.id?? RandomUtil.random(6)))
        <nav>
            <div class="nav nav-tabs" id="nav-tab_#(jboltTabId)" role="tablist">
                <a class="nav-item nav-link active" id="nav-base-tab_#(jboltTabId)" data-toggle="tab" href="#nav-base_#(jboltTabId)" role="tab" aria-controls="nav-base_#(jboltTabId)" aria-selected="true">1、基 本</a>
                <a class="nav-item nav-link" id="nav-image-tab_#(jboltTabId)" data-toggle="tab" href="#nav-image_#(jboltTabId)" role="tab" aria-controls="nav-image_#(jboltTabId)" aria-selected="false">2、图 片</a>
                <a class="nav-item nav-link" id="nav-attr-tab_#(jboltTabId)" data-toggle="tab" href="#nav-attr_#(jboltTabId)" role="tab" aria-controls="nav-attr_#(jboltTabId)" aria-selected="false">3、属 性</a>
                <a class="nav-item nav-link" id="nav-spec-tab_#(jboltTabId)" data-toggle="tab" href="#nav-spec_#(jboltTabId)" role="tab" aria-controls="nav-spec_#(jboltTabId)" aria-selected="false">4、规 格</a>
                <a class="nav-item nav-link" id="nav-marketing-tab_#(jboltTabId)" data-toggle="tab" href="#nav-marketing_#(jboltTabId)" role="tab" aria-controls="nav-marketing_#(jboltTabId)" aria-selected="false">5、营 销</a>
                <a class="nav-item nav-link" id="nav-shipping-tab_#(jboltTabId)" data-toggle="tab" href="#nav-shipping_#(jboltTabId)" role="tab" aria-controls="nav-shipping_#(jboltTabId)" aria-selected="false">6、物 流</a>
                <a class="nav-item nav-link" id="nav-aftersales-tab_#(jboltTabId)" data-toggle="tab" href="#nav-aftersales_#(jboltTabId)" role="tab" aria-controls="nav-aftersales_#(jboltTabId)" aria-selected="false">7、售 后</a>
                <a class="nav-item nav-link" id="nav-content-tab_#(jboltTabId)" data-toggle="tab" href="#nav-content_#(jboltTabId)" role="tab" aria-controls="nav-content_#(jboltTabId)" aria-selected="false">8、图文详情</a>
            </div>
        </nav>
        <div class="tab-content mallGoodsForm">
            <!-- 基础信息 start -->
            <div class="tab-pane fade show active" id="nav-base_#(jboltTabId)" role="tabpanel" aria-labelledby="nav-base-tab_#(jboltTabId)">
                <form class="form"   action="/auth/mall/commodity/update_commodity_base" method="post" onsubmit="return ajaxSubmitForm(this)">
                    #if(commodity.id??)
                    <input type="hidden" name="Commodity.id" value="#(commodity.id??)" />
                    #end
                    <div class="form-group row">
                        <label class="col-form-label col-2 col-sm-3 text-right">商品类目(后端)：</label>
                        <div class="col-7 col-sm-6">
                            <div class="input-group">
                                <input type="text" autocomplete="off" class="form-control bg-white"   value="#(MyUtil.get_commodity_full_name(commodity.type_id??))" readonly="readonly" />

                                <div class="input-group-append" >
                                    <a  class="input-group-text" href="/auth/mall/commodity/edit_back_Type/#(commodity.id)" #if(JboltWithTabs) data-tabtrigger target="_self"  data-key="edit_goods_catgory_#(commodity.id)"  #else data-pjax #end><i class="fa fa-pencil"></i></a>
                                </div>

                            </div>
                            #if(failTips??)
                            <small class="form-text text-danger">提示：#(failTips??)</small>
                            #end
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label col-2 col-sm-3 text-right">商品名称：</label>
                        <div class="col-7 col-sm-6">
                            <input type="text" autocomplete="off" class="form-control" data-rule="required;len<=40" placeholder="请输入商品名称" data-tips="请输入商品名称" maxlength="40" name="Commodity.name" value="#(commodity.name??)">
                        </div>
                    </div>


                    <div class="form-group row">
                        <label class="col-form-label col-2 col-sm-3 text-right">售价(元)：</label>
                        <div class="col-6 col-sm-5">
                            <input type="money"  autocomplete="off" min="0"   class="form-control" data-rule="money" placeholder="请输入商品售价 单位(元)" data-tips="请输入商品售价" maxlength="20" name="price" value="#(MyUtil.get_price_string(commodity.price??))">
                            <small  class="form-text text-muted">填写数字需>=0，如果是免费展示品，请输入0</small>
                        </div>
                    </div>




                    <div class="form-group row">
                        <label class="col-form-label col-2 col-sm-3 text-right">商家：</label>
                        <div class="col-5 col-sm-4">
                            <select class="form-control" data-rule="required"  data-tips="请选择商家" data-url="/auth/mall/commodity/get_commodity_type"  name="Commodity.retailer_id" data-autoload data-text="=请选择=" data-value="" data-select="#(commodity.retailerId??)"></select>
                            
                        </div>
                    </div>


                    <div class="form-group row">
                        <label class="col-form-label col-2 col-sm-3 text-right">商品单位：</label>
                        <div class="col-5 col-sm-4">
                            <input type="text" autocomplete="off" class="form-control" data-rule="required;len<=10" placeholder="请输入商品单位" data-tips="请输入商品名称" maxlength="15" name="Commodity.unit" value="#(commodity.unit??)">
<!--                            <select class="form-control" data-rule="required"  data-tips="请选择商品单位" data-url="/admin/dictionary/options?key=goodsunit"  name="Commodity.unit" data-autoload data-text="=请选择=" data-value="" data-select="#(Commodity.unit??)"></select>-->
                            <small  class="form-text text-muted">统一商品销售单位和库存单位</small>
                        </div>
                    </div>

                    <div class="form-group row">
                        <label class="col-form-label col-2 col-sm-3 text-right">库存量：</label>
                        <div class="col-5 col-sm-4">
                            <input type="number"  autocomplete="off" min="0" class="form-control" data-rule="pznumber;len<=11"  placeholder="请输入商品库存量" data-tips="请输入商品库存量" maxlength="11" name="Commodity.stock" value="#(commodity.stock??)">
                            <small  class="form-text text-muted">不能大于十一位数</small>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label col-2 col-sm-3 text-right">特价状态：</label>
                        <div class="col-5 col-sm-2">
                            <select class="form-control" data-rule="required"  data-tips="请选择商家" data-url="/auth/mall/special_commodity/get_commodity_status"  name="Commodity.special_status" data-autoload data-text="=请选择=" data-value="" data-select="#(commodity.special_status??)"></select>

                        </div>
                    </div>
                    <div class="form-group row" >
                        <label class="col-form-label col-2 col-sm-3 text-right">上下架状态：</label>
                        <div>
                            <select  class="form-control ml-3" data-rule="required"  data-url="/auth/mall/commodity/on_sale"  name="Commodity.onsale_status" data-autoload data-text="=上下架="  data-value="" data-select="#(commodity.onsale_status??)"></select>
                        </div>

                    </div>

                    <div class="form-group text-center">
                        <button type="submit" class="btn btn-success" style="width:150px"><i class="fa fa-check mr-2"></i>更新基本信息</button>
                    </div>
                </form>

            </div>
            <!-- 基础信息 end -->

            <!-- 图片 start -->
            <div class="tab-pane fade" id="nav-image_#(jboltTabId)" role="tabpanel" aria-labelledby="nav-image-tab_#(jboltTabId)">
                <form class="form" id="commodity_img_form"  action="/auth/mall/commodity/update_images" method="post" onsubmit="return false">
                    #if(commodity.id??)
                    <input type="hidden" name="Commodity_image.id" value="#(commodity.id??)" />
                    #end
                    <input type="hidden" id="mainImageInput" data-rule="required" data-tips="请上传商品主图" name="Commodity_image.image" value="#(commodity.image??)" />
                    <!--                    <input type="hidden" id="extraImagesInput"   name="goods.extraImages" value="#(goods.extraImages??)" />-->
                </form>
                <div class="form-group row">
                    <label class="col-form-label col-2 col-sm-3 text-right">商品主图：</label>
                    <div class="col-10 col-sm-9">
                        <img id="image" src="#(commodity.image)" alt="" style="width: 150px;height: 150px">
                        <input type="file" name="file" id="file" accept="image/*"  >
                        <small  class="form-text text-muted text-ceter">建议尺寸640像素*640像素,大小不超200kb</small>
                    </div>
                </div>



                <div class="form-group text-center">
                    <button type="button" onclick="imageload()" class="btn btn-success" style="width:150px"><i class="fa fa-check mr-2"></i>更新图片信息</button>
                </div>

            </div>
            <!-- 图片end -->

            <!-- 营销信息 start -->
            <div class="tab-pane fade" id="nav-marketing_#(jboltTabId)" role="tabpanel" aria-labelledby="nav-marketing-tab_#(jboltTabId)">
                <form class="form"   action="/admin/mall/goods/updateMarketingInfo" method="post" onsubmit="return ajaxSubmitForm(this)">
                    #if(goods.id??)
                    <input type="hidden" name="Commodity.id" value="#(commodity.id??)" />
                    #end
<!--                    <div class="form-group row">-->
<!--                        <label class="col-form-label col-2 col-sm-3 text-right">营销语：</label>-->
<!--                        <div class="col-10 col-sm-9">-->
<!--                            <input type="text" autocomplete="off" class="form-control" data-rule="len<=40" data-notnull="false" placeholder="请输入商品营销语" data-tips="请输入商品营销语" maxlength="40" name="goods.subTitle" value="#(commodity.subTitle??)">-->
<!--                            <small  class="form-text text-muted">用于显示营销信息，与商品名称区分显示</small>-->
<!--                        </div>-->
<!--                    </div>-->

<!--                    <div class="form-group row">-->
<!--                        <label class="col-form-label col-2 col-sm-3 text-right">显示销量：</label>-->
<!--                        <div class="col-7 col-sm-6">-->
<!--                            <input type="number"  autocomplete="off" min="0" class="form-control" data-rule="pznumber" data-notnull="false" placeholder="请输入商品前端显示销量" data-tips="请输入商品前端显示销量" maxlength="10" name="goods.showSaleCount" value="#(commodity.showSaleCount??)">-->
<!--                            <small  class="form-text text-muted">不是真实销量，用来促销显示销量的，烘托销售热度</small>-->
<!--                        </div>-->
<!--                    </div>-->



<!--                    <div class="form-group row">-->
<!--                        <label class="col-form-label col-2 col-sm-3 text-right">限购(选填)：</label>-->
<!--                        <div class="col-5 col-sm-4">-->
<!--                            <input type="number"  autocomplete="off" min="0" class="form-control" data-rule="pzint" data-notnull="false" placeholder="请输入商品限购数量" maxlength="5" name="goods.limitCount" value="#(commodity.limitCount?? 0)">-->
<!--                        </div>-->
<!--                    </div>-->

<!--                    <div class="form-group text-center">-->
<!--                        <button type="submit"  class="btn btn-success" style="width:150px"><i class="fa fa-check mr-2"></i>更新营销信息</button>-->
<!--                    </div>-->
                </form>

            </div>
            <!-- 营销信息 end -->

            <!-- 属性信息 start -->
            <div class="tab-pane fade" id="nav-attr_#(jboltTabId)" role="tabpanel" aria-labelledby="nav-attr-tab_#(jboltTabId)">

            </div>
            <!-- 属性信息 end -->


            <!-- 规格信息 start -->
            <div class="tab-pane fade" id="nav-spec_#(jboltTabId)" role="tabpanel" aria-labelledby="nav-spec-tab_#(jboltTabId)">

            </div>
            <!-- 规格信息 end -->

            <!-- 物流信息 start -->
            <div class="tab-pane fade" id="nav-shipping_#(jboltTabId)" role="tabpanel" aria-labelledby="nav-shipping-tab_#(jboltTabId)">
                <form class="form"   action="/admin/mall/goods/updateShippingInfo" method="post" onsubmit="return ajaxSubmitForm(this)">
                    #if(goods.id??)
                    <input type="hidden" name="Commodity.id" value="#(goods.id??)" />
                    #end

<!--                    <div class="form-group text-center">-->
<!--                        <button type="submit"  class="btn btn-success" style="width:150px"><i class="fa fa-check mr-2"></i>更新物流信息</button>-->
<!--                    </div>-->
                </form>
            </div>
            <!-- 物流信息 end -->

            <!-- 售后信息 start -->
            <div class="tab-pane fade" id="nav-aftersales_#(jboltTabId)" role="tabpanel" aria-labelledby="nav-aftersales-tab_#(jboltTabId)">
                <form class="form"   action="/admin/mall/goods/updateAfterSalesInfo" method="post" onsubmit="return ajaxSubmitForm(this)">
                    #if(goods.id??)
                    <input type="hidden" name="goods.id" value="#(commodity.id??)" />
                    #end
<!--                    <div class="form-group row" data-radio  data-rule="radio" data-value="#(goods.isProvideInvoices?? false)"   data-name="goods.isProvideInvoices" data-default="false">-->
<!--                        <label class="col-form-label col-2 col-sm-3 text-right">发票：</label>-->
<!--                        <div class="col-8 col-sm-7">-->
<!--                            <div class="radio radio-primary  radio-inline">-->
<!--                                <input  id="isProvideInvoices_false" type="radio" name="goods.isProvideInvoices"   value="false"/>-->
<!--                                <label for="isProvideInvoices_false">无</label>-->
<!--                            </div>-->

<!--                            <div class="radio radio-primary  radio-inline">-->
<!--                                <input  id="isProvideInvoices_true" type="radio" name="goods.isProvideInvoices"   value="true"/>-->
<!--                                <label for="isProvideInvoices_true">有</label>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->


<!--                    <div class="form-group row" data-radio  data-rule="radio" data-value="#(goods.isGuarantee?? false)"   data-name="goods.isGuarantee" data-default="false">-->
<!--                        <label class="col-form-label col-2 col-sm-3 text-right">保修：</label>-->
<!--                        <div class="col-8 col-sm-7">-->
<!--                            <div class="radio radio-primary  radio-inline">-->
<!--                                <input  id="isGuarantee_false" type="radio" name="goods.isGuarantee"   value="false"/>-->
<!--                                <label for="isGuarantee_false">无</label>-->
<!--                            </div>-->

<!--                            <div class="radio radio-primary  radio-inline">-->
<!--                                <input  id="isGuarantee_true" type="radio" name="goods.isGuarantee"   value="true"/>-->
<!--                                <label for="isGuarantee_true">有</label>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->

<!--                    <div class="form-group text-center">-->
<!--                        <button type="submit"  class="btn btn-success" style="width:150px"><i class="fa fa-check mr-2"></i>更新售后信息</button>-->
<!--                    </div>-->
                </form>

            </div>
            <!-- 售后信息 end -->



            <!-- 图文详情 start -->
            <div class="tab-pane fade" id="nav-content_#(jboltTabId)" role="tabpanel" aria-labelledby="nav-content-tab_#(jboltTabId)">
                <form class="form" id="text_content_form"  action="/auth/mall/commodity/update_text_commodity" method="post" onsubmit="return ajaxSubmitForm(this)">
                    #if(commodity.id??)

                    <input type="hidden" name="commodityHtmlContent.id" value="#(commodity.id??)" />
                    #end

                    <div style="display:none;" >
                        <textarea id="commodityHtmlContent_hidden"  class="form-control" data-rule="required" placeholder="请输入商品详情" data-tips="请输入商品详情"   name="commodityHtmlContent.content" >#(commodity.content??)</textarea>
                    </div>
                </form>


                <div class="form-group" style="width:800px;min-height:500px;margin:30px auto;" >
                    <div
                            data-editor="summernote"
                            data-height="500"
                            data-imghost="#(imghost??)"
                            data-imguploadurl="/auth/mall/commodity/upload_content_image/#(commodity.id??)"
                            data-hiddeninput="commodityHtmlContent_hidden"
                            id="HtmlContent"
                            class="form-control">#(commodity.content??) </div>
                </div>

                <div class="form-group text-center">






                    <button type="button"  onclick="$('#text_content_form').submit()" class="btn btn-success" style="width:150px"><i class="fa fa-check mr-2"></i>更新商品详情</button>
                </div>
            </div>
            <!-- 图文详情 end -->


        </div>

        <!--  <div class="form-group row" data-radio  data-rule="radio" data-value="#(goods.onSale??)"   data-name="onSale" data-default="false">
                <label class="col-form-label col-2 col-sm-3 text-right">上架设置：</label>
                <div class="col-8 col-sm-7">
                        <div class="radio radio-primary  radio-inline">
                        <input  id="onSale_false" type="radio" name="onSale"   value="false"/>
                        <label for="onSale_false">暂不上架</label>
                        </div>

                        <div class="radio radio-primary  radio-inline">
                        <input  id="onSale_true" type="radio" name="onSale"   value="true"/>
                        <label for="onSale_true">立即上架</label>
                        </div>

                        <button type="submit" class="btn btn-success" style="width:150px"><i class="fa fa-check mr-2"></i>确 定</button>
                </div>
            </div> -->










    </div>
</div>
</div>
#end
#define js()
<script type="text/javascript" src="/assets/js/jquery-min.js"></script>
<script src="https://unpkg.com/qiniu-js@2.5.4/dist/qiniu.min.js"></script>
<script>
    var inputBox = document.getElementById("file");
    var img = document.getElementById("image");
    $(function () {
        $("#file").on("change", function ()  {
            var reader = new FileReader();
            reader.readAsDataURL(inputBox.files[0]);//发起异步请求
            reader.onload = function () {
                //读取完成后，将结果赋值给img的src
                img.src = this.result
            }
        })
    })

    $(function(){
        openLeftNav("/auth/mall/commodity");
        var withTabs=isWithtabs();
        if(withTabs){
            JBoltTabUtil.changeUrl("/auth/mall/commodity/edit_commodity/#(commodity.id)");
        }
    })

    function imageload() {

        var obj = $("#file");

        var fileName = obj.val();//上传的本地文件绝对路径

        var suffix = fileName.substring(fileName.lastIndexOf("."),fileName.length);//后缀名
        var file = obj.get(0).files[0];	                                           //上传的文件
        var size = file.size > 1024 ? file.size / 1024 > 1024 ? file.size / (1024 * 1024) > 1024 ? (file.size / (1024 * 1024 * 1024)).toFixed(2) + 'GB' : (file.size
            / (1024 * 1024)).toFixed(2) + 'MB' : (file.size
            / 1024).toFixed(2) + 'KB' : (file.size).toFixed(2) + 'B';		   //文件上传大小
        //七牛云上传
        $.ajax({
            type:'post',
            url: "/auth/mall/Qn/QiniuUpToken",
            data:{"suffix":suffix},
            dataType:'json',
            success: function(result){

                if(result.success == 1){

                    var observer = {
                        //设置上传过程的监听函数

                        next(result){                        //上传中(result参数带有total字段的 object，包含loaded、total、percent三个属性)
                            Math.floor(result.total.percent);//查看进度[loaded:已上传大小(字节);total:本次上传总大小;percent:当前上传进度(0-100)]
                        },
                        error(err){
                            alert(2);//失败后
                            alert(err.message);
                        },
                        complete(res){

                            //成功后
                            // ?imageView2/2/h/100：展示缩略图，不加显示原图
                            // ?vframe/jpg/offset/0/w/480/h/360：用于获取视频截图的后缀，0：秒，w：宽，h：高


                             $("#image").attr("src","http://"+result.domain+"/"+result.imgUrl+"?i");
                            $("#mainImageInput").val("http://"+result.domain+"/"+result.imgUrl+"?i");

                            ajaxSubmitForm(commodity_img_form);
                        }
                    };
                    var putExtra = {
                        fname: "",                          //原文件名
                        params: {},                         //用来放置自定义变量
                        mimeType: null                      //限制上传文件类型
                    };
                    var config = {
                        region:qiniu.region.z2,             //存储区域(z0:代表华东;z2:代表华南,不写默认自动识别)
                        concurrentRequestLimit:3            //分片上传的并发请求量
                    };
                    var observable = qiniu.upload(file,result.imgUrl,result.token,putExtra,config);
                    var subscription = observable.subscribe(observer);          // 上传开始
                    // 取消上传
                    // subscription.unsubscribe();



                }else{

                    alert(3);//失败后
                    alert(result.message);                  //获取凭证失败
                }



            },error:function(){                             //服务器响应失败处理函数
                alert("服务器繁忙");
            }
        });

    }
</script>
#end
